<template>
    <div class="main">
        <div class="top">
            缴费凭证
        </div>
        <div class="img" >
            <div class="img_detail" v-if="dialogImageUrl!=''">
                <img  style="position: absolute;left: 0px;width:100%;height: 100%;border-radius: 10px;" :src="dialogImageUrl"  >
                <div  class="forBig" @click="forBig()">

                </div>
            </div>
            <h1 v-if="dialogImageUrl==''" style="margin-top: 0px">暂未上传凭证，请尽快上传。</h1>
        </div>
        <div class="bottom">
            <div class="btn">
                <el-upload 
                    class="upload-demo" 
                    action="img/back/uploadImg"
                    :on-success="handleAvatarSuccess"
                    accept=".jpg,.png" 
                    :before-upload="beforeupload" 
                    :limit="1"
                    :disabled="dialogImageUrl!=''"
                    >
                    <el-button type="primary" :disabled="dialogImageUrl!=''">点击上传</el-button>    
                </el-upload>
            </div>   
        </div>
        <el-dialog :visible.sync="dialogTableVisible">
            <img width="100%" :src="dialogImageUrl">
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data(){
        return{
            dialogImageUrl: "",
            dialogTableVisible:false,
        }
    },
    props:{
        studentdetail:{}
    },
    methods:{
        
        handleAvatarSuccess(ews,file) {
            this.dialogImageUrl = URL.createObjectURL(file.raw);
            this.$message.success("上传成功！");
        },
        beforeupload(file, fileList) {
            let types = ["image/jpeg", "image/jpg", "image/png"];

            const isImage = types.includes(file.type);

            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isImage) {
                this.$message.error("上传图片格式错误，格式只能为 png,jpg!!");
                return false;
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
                return false;
            }
            return true;
        },
        forBig(){
            console.log("点击了");
            this.dialogTableVisible=!this.dialogTableVisible;
        }



        
        
    },
    mounted(){
        // 找图片的方法
        // console.log("触发了");
        var _this=this;
        axios({
            method: "get",
            url: "img/back/download/"+_this.studentdetail.iid,
        }).then(function (resp) {
            _this.dialogImageUrl=resp.data.msg;
        })
    }
}   
</script>
<style scoped>
.main{
    margin-top: 20px;
}
.main .top{
    text-indent: 2em;
}
.main .img{
    height: 300px;
    background-color: #ffffff;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
    padding-top: 20px;
}
.main .img .img_detail{
    position: relative;
    height: 280px;
    width: 280px;
    float: left;
    margin-left: 50px;
    border-radius: 10px;
}

.main .img .img_detail .forBig{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3) url(../assets/serach.png) no-repeat center;
}
.main .img .img_detail:hover .forBig{
    display: block;
}
.main .bottom{
    height: 70px;
    background-color: #ffffff;
}

 .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }

 .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
 }

 .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 178px;
     height: 178px;
     line-height: 178px;
     text-align: center;
 }

 .avatar {
     width: 178px;
     height: 178px;
     display: block;
 }
 .btn{
    width: 200px;
    padding-top: 17px;
 }
</style>